import React, { FC, useEffect, useState } from 'react'
import { getMyPullRecord, getMyPushRecord } from "../../../api";
import {Empty, Button, Cell, Space, Notify, Card, Tag} from "react-vant";
import girl from "../../../assets/girl.svg"
import boy from "../../../assets/boy.svg"
import nodata from "../../../assets/nodata.svg"
import { useNavigate } from "react-router-dom";
import { copy } from '../../../utils/utils';
import { NavBar,Image, ImageViewer } from 'antd-mobile';

type Item = {
    _id: string,
    nickName: string,
    pushUserId: string,
    imageUrls: string[],
    imageIds: { url: string }[],
    account: string,
    accountType: string,
    content: string,
    createTs: string,
    pullTs: string,
    sex: string,
    age: number,
    tags: string[],
    wxQrCode: string,
    show?: Boolean
}
type ListProps = Item[]

const NoData = () => {
    const navigate = useNavigate()
    return (
        <Empty image={nodata} description="您还没有抽取记录">
            <Button style={{ width: 160 }} onClick={() => { navigate('/') }} plain hairline round type="primary">
                去免费抽一个吧
            </Button>
        </Empty>
    )
}

const Title = (type: string, item: Item) => {
    return (
        <Space align='center'>
            <p className='rv-ellipsis'>{item.nickName} {item.account} ({item.accountType})</p>
            <Image src={item.sex == '0' ? boy : girl} alt="" />
        </Space>

    )
}

const Copy = (text: string) => {
    const copyHandler = () => {
        copy(text)
        Notify.show({
            type: 'success',
            message: '账号复制成功,去添加吧'
        })
    }

    return (
        <Button plain round type="primary" size='mini' style={{ width: 50 }} onClick={() => { copyHandler() }}>
            复制
        </Button>
    )
}

const CellItem = (props: { data: Item, type: string, cellClick?: () => void }) => {
    let { data, type, cellClick } = props
    return (
        <div>
            <Cell label={type == 'pull' ? data.pullTs : data.createTs}
                title={Title(type, data)}
                extra={type == 'pull' && Copy(data.account)}
                onClick={cellClick}
                icon={
                    <Image
                        width={44}
                        height={44}
                        fit='cover'
                        src={data.imageUrls[0] || data.imageIds[0].url}
                        style={{ borderRadius: '50%' }}
                    />
                } />
            {data.show && <Card round>
                <Card.Header border>账号：{data.account} ({data.accountType})</Card.Header>
                <Card.Body
                    style={{
                    }}
                >
                    <div>
                        {/* <p><span>抽取时间：</span><span>{data.pullTs}</span></p> */}
                        <p className='pb5'><span>年龄：</span><span>{data.age || '--'}</span></p>
                        <p className='pb5'><span>性别：</span><span>{data.sex == '0' ? '男生' : '女生'}</span></p>
                        <p className='pb5'><span>标签：</span><span>{data.tags.map(tag => <>
                            <Tag plain type="warning" key={tag} style={{marginRight:5}}>
                                {tag}
                            </Tag></>)}</span></p>
                        <p className='pb5'><span>留言：</span><span>{data.content || '--'}</span></p>
                        {data.wxQrCode && (
                            <p className='pb5'><span>微信二维码：</span>
                            <span className='text-primary' onClick={() =>
                                     ImageViewer.show({
                                        image:data.wxQrCode,
                                        renderFooter: () => {
                                            return (
                                                <div className='text-center pb10'>
                                                    <Tag color='default' className='px10 py7' round>长按二维码可直接添加</Tag>
                                                </div>
                                            )
                                        }
                                    })
                                   }>
                                    查看
                            </span>
                         </p>
                        )}
                    </div>
                </Card.Body>
                <Card.Footer border>
                    <Button type="primary" round block size="small" onClick={() =>{
                                    let images: string[] = []
                                    if (data.imageIds.length > 0) {
                                        images = data.imageIds.map((item) => {
                                            return item.url
                                        })
                                    } else {
                                        images = data.imageUrls
                                    }
                                    ImageViewer.Multi.show({
                                        images                           
                                    })
                                }}>
                        更多照片
                    </Button>
                </Card.Footer>
            </Card>}
        </div>
    )
}


const My: FC = () => {

    const navigate = useNavigate()

    const [myPullList, setMyPullList] = useState<ListProps>([]);
    const [myPushList, setMyPushList] = useState<ListProps>([]);

    const getMyPullList = async () => {
        let res = await getMyPullRecord();
        setMyPullList(res.data);
    }
    const getMyPushList = async () => {
        let res = await getMyPushRecord();
        setMyPushList(res.data);
    }

    const cellClick = (item: Item, index: number) => {
        let row = myPullList[index]
        row.show = !row.show
        console.log(row);

        setMyPullList([...myPullList])
    }

    useEffect(() => {
        getMyPullList();
        getMyPushList();
    }, [])

    return (
        <div className='pb15'>
            <NavBar className='sticky bgfff' onBack={() => navigate(-1)}>我的抽/投记录</NavBar>

            {myPullList.length > 0 ?
                <Cell.Group title="我的抽取记录" card>
                    {myPullList.map((item: Item, index) => {
                        return (
                            <CellItem key={item._id} data={item} type="pull" cellClick={() => { cellClick(item, index) }} />
                        )
                    })}
                </Cell.Group>
                : <NoData />}


            {myPushList.length > 0 &&
                <Cell.Group title="我的投递记录" card>
                    {myPushList.map((item: Item) => {
                        return (
                            <CellItem key={item._id} data={item} type="push" />
                        )
                    })}
                </Cell.Group>
            }
        </div>
    )
}

export default My;